import React from 'react'
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import "./index.less"

import homeIcon from '@/assets/images/tabbar/home_2.png';
import homeActiveIcon from '@/assets/images/tabbar/home_1.png';
import mineIcon from '@/assets/images/tabbar/my_2.png';
import mineActiveIcon from '@/assets/images/tabbar/my_1.png';
import fastIcon from '@/assets/images/tabbar/fast.png';
import { useLocation, useNavigate } from 'react-router-dom';

const routes = ['/home', '/fast', '/mine']

export default function BottomTab() {
    const [value, setValue] = React.useState(0);
    const nav = useNavigate()
    const { pathname } = useLocation()
    return (
        <div className='tab' style={{ display: routes.includes(pathname) ? 'block' : 'none' }}>
            <BottomNavigation
                showLabels
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                    nav(routes[newValue])
                }}
            >
                <BottomNavigationAction label="首页" icon={<img src={value === 0 ? homeActiveIcon : homeIcon} />} />
                <BottomNavigationAction label="快速刷题" icon={<img src={fastIcon} />} />
                <BottomNavigationAction label="我的" icon={<img src={value === 2 ? mineActiveIcon : mineIcon} />} />
            </BottomNavigation>
        </div>
    )
}
